import { ref } from "vue";
// 导入时间处理库
import moment from "moment";
// 导入查询轮播图接口
import { queryCarouselList } from "@/api/carouselAPI";
// 导入提示方法
import { message } from "ant-design-vue";

export const useQueryCarousel = (data, getCarouselData) => {
  // 日期选择存储
  const datetime = ref();

  // 定义time
  var timer = null;

  // 查询轮播图列表
  const queryCarousel = () => {
    // 如果时间选择为undefined就return
    if (datetime.value == undefined) return;
    // 参数
    const query = {
      start_time: moment(datetime.value[0]).format("YYYY-MM-DD HH:mm:ss"),
      end_time: moment(datetime.value[1]).format("YYYY-MM-DD HH:mm:ss"),
    };

    // 如果有time就清除
    timer && clearTimeout(timer);
    // 开启定时器 阻止连续多次请求
    timer = setTimeout(() => {
      // 查询轮播图列表
      queryCarouselList(query)
        .then((res) => {
          if (res.status === 200) {
            // 遍历修改日期格式
            res.data.forEach((item) => {
              item.start_time = moment(item.start_time).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              item.end_time = moment(item.end_time).format(
                "YYYY-MM-DD HH:mm:ss"
              );
            });
            message.success("查询成功");
          }
          if (res.status === 205) {
            message.error("没有数据");
          }
          data.value = res.data;
        })
        .catch((error) => {
          throw new Error(error);
        });
    }, 2000);
  };

  // 点击重置
  const handleReset = () => {
    // 如果时间选择为undefined就return
    if (datetime.value == undefined) return;
    // 重置时间
    datetime.value = undefined;
    // 重新渲染数据
    getCarouselData();
    // 提示重置成功
    message.success("重置成功");
  };

  return {
    datetime,
    queryCarousel,
    handleReset,
  };
};
